Coding info source: Link
Coding Dev Resource: MDN Web Docs
SVG background pixel art online: Source
Making pixel sprite GIFs online: Link
PNG to SVG (for images, not pixel art): Link
Online SVG drawing tool: Link
Online Music Maker: Link

Creating the HTML File

Declaration:the HTML document mustin include the declaration < !DOCTYPE html > as the first line to declare the document is an html file
Add < html > and < /html > tags: these tags denote the start and end of the HTML contents and the start tag should be placed immediatey after the declaration and the end tag immediately at the very end of the HTML document contents
Saving the file: When saving the file, it must be named with the .htm or .html extension (they are interchangable) and saved in the UTF-8 format
Opening the file: when opening the file, right click then select the open with and then the perfered browser to view it in that browser

Non-Visible Content

lang="en-US" attribute: can be added in the < html > start tag to denote the language (english) and the country (US). While this content is not visible on the page itself, it is used by the browser/search engines to help catagorize the site. The full list of language and country values, look up ""
< head > & < /head > tags: these tags should be placed after the < html > tags and are not visible on the page. They serve as a container for the meta information about the html page
< title > & < /title > tags: these tags should be placed between the < head > tages and are not visible on the page. The contenst of this element is what will be displayed in the broswer tab/title bar
< !-- Insert Comment Here -- >This is how you add a comment to your code, this is good for adding notes for later reference and will only be visible in the HTML source code and can also be placed within a paragraph to add a note mid-line. This is also useful for when you need to hide contents but do not want to remove the code since it can hide multiple lines as long as it is between the two tags. Its also helpful when debugging to hide portions of the code to narrowdown the code with issues.

Adding HTML Text Contents

< body > & < /body > tags: the start tag must be placed at the beggining of any content which you want to be visible and the end tag after the visible content.

HTML Elements w/ Start/Content/End Tags

Paragraphs: The < p > and < /p > tags denote the start and end of a paragraph and when typed in a paragraph must include spaces to avoid nested paragraphs
Headings: The < h1 > & < /h1 > through < h6 > & < /h6 >tags denote heading such that the h1 heading is the largest and the h6 is the smallest. Only h1-6 are possible, adding a h7 heading will not add a smaller heading but instead display the text in the browsers default size and style. These headings are also used by search enginesto index the structure and contents of your webpage so be sure to use it only for headings
Preserving formatting: The < pre > & < /pre > tags can be used to that the formatting of their content is preserved when the text is displayed. This helpful for things like adding a poem into your site since it will preserve font, size, color, spacing, etc. of the original text in the html file.

HTML Elements w/o Content/End Tags (Empty Elements)

< br >:This tag denotes a break in the paragraph and is used to add a space between text without breaking the paragraph up as this would add in extra space between the lines of text.
< hr >:This tag denotes a "horizontal rule" and is displayed as a horizontal line across the page. It is useful for indicating a separtion in the page's content

Basic Formatting Elements

These formatting elements can be used to display special kinds of text and do not need to be (but can be)between < p > or < h# > tags

< b > & < /b > denotes bold text, without extra importance
< strong > & < /strong > denotes an element of strong importance and will be displayed as bold text usually
< i > & < /i > denotes an italicised word (usually a technical term or forgien language word or thought)
< em > & < /em > denotes emphasized text and an ereader will read this with verbal stress
< small > & < /small > denotes smaller text
< mark > & < /mark > denotes text which should be highlighted
< del > & < /del > denotes text which has been deleted from a deocument and is usually displated as a strikethrough
< ins > & < /ins > denotes text inserted into a document and is usually underlined
< sub > & < /sub > denotes subscript text and will appear half a character below the normal line and sometmies smaller than the normal font
< sup > & < /sup > denotes superscript text and will appear half a character above the bnormal line and someimes in a smaller font

Adding Quote/Citation/Contact Formatting

< blockquote > & < /blockquote > denotes section quoted from another source and is typically indented, ie < blockquote cite="https://www.source.com" > quote contents < /blockquote >
< q > & < /q > denotes a short quotation and will typically be displayed with quotations around the text, this is good for quotations integrated into a sentence/paragraph
< abbr > & < /abbr > denotes an abbreviation or acronym. using this tag helps browsers, translation systems, and serach-engines determine how to treat the text. It's also helpful for the user to add a description for the abbreviation/acronym when you hover over the text using a global title atribute (ie. < abbr title = "Abbreviation Description Here" > ABBR < /abbr >)
< address > & < /address > denotes the contact info for the author/owner of a document or article and can be used for adding emails, URLs, adresses, phone#s, social handles, etc. and will be rendered in italics, typically w/ a line break before and after the element.
< cite > & < /cite > denotes the titiel of a creative work (books/poems/songs/movies/painting/scuptures/etc.) and is typically displayed in italics
< bdo > & < /bdo > stands for bi-directional override and overrides the current text direction, good for when you want to make your text to be mirrored without acrually having to figure out the mirrored spelling ie. < bdo dir="rtl" >text displayed right to left < /bdo >

Optional Attributes

*Note:lang atribute not included, see Non-Visible Content section for more info*
"style = "property:value;" atribute: this atribute is used to control the formatting of the page/text. Below are a few examples of the possible atribute properties and values this can have and their effects;
1. "background-color:cssColorName;": hen this attribute and value can determine the background color of a portion of the page. When placed in the < body > tag this will change the background of the entire page. When placed in the < h1 > tag, this will change the background for that specific heading line. Or when placed in an < p > tage it will change the background color for the lines of that paragraph content
Note: for elements needing colors, colors can also be set using RGB, HEX, HSL, RGBA, and HSLA values
2. "background-image: url('backgroundimage.jpg');" : sets up a specific image as the background for the attribute it is placed in (entire page when in body tag)
For RGB: "background-color:rgb(255, 99, 71);" where the numbers list intensity for red, green, and blue respectivly and go from 0 to 255 (Note; 0,0,0 = black & 255,255,255 = white, and plain greys are variations where all rbg values are equal ie 100,100,100)
For RGBA: "background-color:rgba(255, 99, 71, 0.5);" where the numbers denote red,green,blue, and alpha values respectively. the values for colors are the same as for RGB and the alpha component controls opacity and can range from 0.0 (fully transparent) to 1.0 (opaque)
For HEX: "background-color:#ff6347;" where HEX stands for hexadecimal and each of the two characters after the # represent the red,green, and blue values respectively and can range from 00 to ff where ff is the highest value (count;0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f)
For HSL: "background-color:hsl(9, 100%, 64%);" where HSL stands for hue, staturation & lightness, reflecting whar each value is used for. Hue is the degree of the color on the color wheel (0-360) where 0=red,120=green,&240=blue. Saturation is the percent value where 0%=grays and 100%= the full color. Lightness is the how light the color is and ranges from 0-100% so 0% = black & 100% = white
For HSLA: "background-color:hsla(9, 100%, 64%, 0.5);" This adds an alpha component to the HSL color so the last color denotes transparency (0.00=fully transparent & 1.0=opaque)
Color Picker: RGB/Hex/HSL/HTML Color Names/Converter
3. "color:cssColorName;":This value can be used in the < h# > and < p > tags to change the color of the text content of the tag in which it is placed.
4. "border:2px solid colorName;" is used to add a border to a section, where the px is the pixel thickness of the border, solid is the type of border, and colorName would be the CSS color name for the border color
5. "font-size:40px;": This value can be used to specify the size of the text displayed in pixels, when added within the < h#> or the < p > tags.
6. "font-size:150%;": this atribute can be placed in the < h# > or < p > and controls the size of the text as well. This format is preferred since it makes it easier to later optimize your site according to screen size (ie mobilee devices) instead of locking the text into a set pixel size
7. "text-align:center;" this attribute can be placed in the < h# > or < p > and controls the alignment of the text
8. "font-family:fontName;": this attribute can be placed in the < h# > or < p > and controls the font type when a CSS font name is input
title = "value": this attribute can be placed in the < h# > or < p > and the value added will be displayed when the user hovers over the text content of that tag.

Adding HTML Multimedia Contents

Adding Images(can be animated images)

General format: < img src = "image.jpg" width = "100" height = "150" > where:
img=image
src= image source
width/height atributes= control the size of the image displayed.
style=" width:500px;height:600px; " can be used in lieu of the height/width attributes to control the dimensions *recommended since it prevents the CSS style from changing the image size*
alt="alt text here" = can be places in the < img > tag before width/height atributes to denote the alternative text which is displayed when page does not load properly or used for acessibility purposes

Making Floating Images
Making a floating image gives a similar effect to setting an image to have square text wrapping vs the default top&bottom text wrapping around the image
This can be added by using the image tag with the CSS float property between the < p > and < /p > tags.
Example:
< p >< img src="gifname.gif" style="float:right;width:42px;height:42px;"> = image floats to right paragraph text.< /p > or < p >< img src="gifname.gif" style="float:left;width:42px;height:42px;"> = image floats to the left paragraph text.< /p >

When adding an images to a HTML file, there are a few ways to do it each with their own advantages and disadvantages.

Method 1:Relative URL:

This method uses a link to an image hosted within the website. In this method, the link excludes the domain name and if the URL starts with a slash will be relatve ot the domain (ie src = "/images/img_girl.jpg") and without the slash will be relative to the current page (ie src = "img_girl.jpg"). This is the perfered method to add images because they will not break if you change domain.
Example: < img src="/foldername/filename.gif" style="width:128px;height:128px;" > = links to the file named filename.gif in the foldername folder

Method 2:Absolute URL:

This method links to an external image that is hosted on another site. This method should be used with caution as the images may be subject to copyright and images inserted using this method cannot be controled- any changes or removal of the source image will be reflected on your site.

Adding Links

General format: < a href="https://www.webadress.com" > Display Text < /a > where:
< a > and < /a >tags denote it as a link
"href" = hypertext reference
""https://www.webadress.com"" = full web adress used for hyperlink
"Display Text" = text link will be displayed as

Changing Link Colors w/ CSS

Typical Colors;
unvisited link = underlined & blue
visited link = underlined and purple
active link = underlined and red

Code to alter colors/underline, should be placed within the style tag;

a:link {
  color: green;
  background-color: transparent;
  text-decoration: none;
}

a:visited {
  color: pink;
  background-color: transparent;
  text-decoration: none;
}

a:hover {
  color: red;
  background-color: transparent;
  text-decoration: underline;
}

a:active {
  color: yellow;
  background-color: transparent;
  text-decoration: underline;
}

Note: Links do not need to be text, they can also be images or any other HTML element

Seeintg Images as Links;
< img > tags should be placed between the < a > & < /a > tags
Example:

< a href="default.asp" >
< img src="localgifname.gif" alt="alternate text" style="width:42px;height:42px;" >
< /a >

Setting up HTML button links
Javascript, can be added anywhere in the HTML code:
< button onclick="document.location='default.asp'">Display Text< /button >

CSS, should be added either in style tag or CSS file:

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}

a:hover, a:active {
  background-color: red;
}

Adding Page Bookmarks

Create the bookmark using id attribute in an element;
< p id="bookmarkname" >Book marked text< /p >
Add link to bookmark;
< a href="#bookmarkname" >Display text< /a >

Note: when adding link to a bookmark outside of the current page use < a href="originPageName.html#bookmarkname">DIsplay Text< /a >

Linking to emails:
to link to am email, just add the mailto: to the href atribute, this will automatically open the users email app/program to send an email
< a href="mailto:email@example.com" >display text< /a >

Adding Hover Text/Tool Tip to Links
To do this is the same as adding hover text on any other attribute, just add the atribute title="Hover Text" in the < a > tag
Example:
< a href="https://www.link.com/" title="Hover Text">Display Text< /a >

Similar to images, the links can be absolute or relative.
Local links (links to a page within the same site);
< a href="localLink.asp">Display Text< /a > = links to page in the same folder as the current page
< a href="/foldername/pagename.asp">Display Text< /a > = opens a page from the folder on the same site

Absolute URL (links to pages outside site);
< a href="https://www.link.com/">Display Text< /a > = lniks to outside website using full URL

Changing How The Link Opens

< a href="https://www.link.com/" target="target atribute">Link Display Text< /a >
The target attribute can be changed to alter how the link opens;
_self = link will open in the same window/tab as the one you opened it in
_blank = link will open in a new tab/window
_parent = link will open in a new parent frame
_top = link will open in the full body of the window
Note: the _self, _parent, and _top came from iframe site building where they refered to the frame in which the link would open but are now functionally the same since code is no longer written in frames (typically)

Adding Image Maps(images with clickable areas)

HTML image maps are created by adding the < map > & < /map > tags after an < img > tag which contains the usemap="#imagename" to set the image as an image map
Between the < map > & < /map > tags, there should be 1+ < area > tags which specify details about the clickable are of the image, so that...
shape="shapename" = the shape of the clickable are of the image
coords="##,##,##,##" = where the clickable area of the image is using pixel coordinates
href="linkedsiteorfile.htm" = where it links to
Example:

< img src="workplace.jpg" alt="Workplace" usemap="#workmap" >
< map name="workmap" >
  < area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm" >
  < area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm" >
  < area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm" >
< /map >

Types of Possible Area Shapes
rect = defines a rectangular region, needs 2 sets of two coordinates so it specifies the x&y of each(coords="x,y,x,y")
circle = defines a circular region, needs 3 coordinates so first two set center and the third the radius (coords="x,y,radius")
poly = defines a polygonal region and can be used to make any shape using several sets of x,y coordinate pairs (coords="x,y,x,y,x,y,...)"
default = defines the entire image as the clickable region

The link could also be set up for triggering a java script function by adding a click event to the < area > element
For example;

< map name="workmap" >
  < area shape="circle" coords="337,300,44" href="coffee.htm" onclick="myFunction()" >
< /map >

< script >
 function myFunction() {
  alert("You clicked the coffee cup!");
}
< /script >

In that example, clicking on the specified area leads to a browser alert popup/notification telling you you clicked on the cup

Stylizing w/ CSS

Cascading Style Sheets (CSS) is used to control the layout of multiple linked webpages at once and using this makes the process of updating the layout of your site much easier since it specifies color/font/text size/spacing/positioning and layout of elements, background images and colors/ display format for different edvices/screen sizes, etc.
Note: style applied to parent element will apply to all children elements automatically in the parent unless otherwise specified

Ways to Add CSS to HTML

1. Inline

uses the style attibute in the HTML elements to change the look of the element
Example: < h1 style="color:blue;" >A Blue Heading< /h1 >

2. Internal

uses the style attibute (< style > & < /style >) in the < head > section
Example: where all h1 elements will be blue and all text in < p > elements will be red and the page will have a powderblue background

< head >
< style >
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
< /style >
< /head >

3. External

uses a < link > element to link an external CSS file in the < head > section. The CSS file cannot have HTML code and needs to be saved with the .css extension. This is preferable since it allows the changing of formatting of multiple elements in multiple pages at once with only one file, simplyfying the process of setting up and changing themes **This is what neocities uses by default**
Ways of linking HTML fo CSS style page

  < link rel="stylesheet" href="https://www.w3schools.com/html/styles.css" > = uses a full URL to link to a style sheet
  < link rel="stylesheet" href="/html/styles.css" > = links a style sheet located in the html folder on the current web site
  < link rel="stylesheet" href="styles.css" > = links to a style sheet located in the same folder as the current page

CSS style sheet basic example where background of linked HTML pages will be powderblue, the h1 heading texts will be blue and the p text will bw red

body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}

CSS properties

**Note: all attibutes listed in Optional Attributes section can also be used** color: colorname; = controls text color
font-family: fontname; = controls font type
font-size: ##% = controls font size
border:#px solid colorname; = adds a border of a certain pixel thickness, type, and color
---padding: ##px; = needs to be preceeded with the border propery, adds padding/space between the text and the border
---margin: ##px; = needs to be preceeded by the border property, defines margin (space) outside of the border
background-image: url('image.jpg'); = sets up a specific image as the background for the specified attribute (entire page when in body tag)
---background-repeat: no-repeat; = needs to be preceeded with the background-image: propery, if image smaller than element, image will repeat to fill the empty space, this can be avoided by adding this into code and will leave any extra space beyond the image size blank
Example:

< style >
 body {
  background-image: url('backgroundimage.jpg');
  background-repeat: no-repeat;
}
< /style >

---background-attachment: fixed; = needs to be preceeded with the background-image: property, maintains the proportions fixed (recommended to add when covering the entire background to make sure element always covered)
---background-size: ###% ###%; = needs to be preceeded with the background-image: property, and sets the image's dimentions with values from 0% to 100% to strech to fit the entire element.
------background-size: cover; = needs to be preceeded with the background-image: property, and expands the image to cover the area of the element while maintaining the same proportions (no stretching)

Table of Contents: